<template>
  <div class="uploadimg" :style="{ marginLeft: marginLeft }">
    <el-upload
      action="false"
      :class="isAddImg ? 'disabled' : ''"
      accept="image/png,image/gif,image/jpg,image/jpeg"
      :limit="limit"
      :with-credentials="true"
      multiple
      list-type="picture-card"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :http-request="httpRequest"
      :on-preview="handlePictureCardPreview"
      :on-remove="onRemove"
    >
      <div class="uploadIco">
        <i class="el-icon-plus"></i>
        <div class="text">{{ uploadType }}</div>
      </div>
    </el-upload>
    <el-dialog
      v-model="dialogVisible1"
      width="600px"
      append-to-body
      class="uploadimgDialog"
    >
      <img style="width: 500px; height: 500px" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    limit: {
      type: Number,
      default: 1,
    },
    imgUrl: {
      type: Array,
      required: true,
    },
    lableName: {
      type: String,
      default: "",
    },
    uploadType: {
      type: String,
      default: "上传图片",
    },
    marginLeft: {
      type: String,
      default: "0px",
    },
  },
  data() {
    return {
      fileArr: [],
      fileList: [],
      isRemove: false, // 用于编辑时是否上传了图标
      dialogVisible1: false,
      dialogImageUrl: "",
    };
  },
  computed: {
    isAddImg() {
      if (this.limit == this.fileArr.length) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    imgUrl: {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        console.log(val);

        let temp = [];
        if (val != "") {
          val.forEach((item) => {
            console.log(item);
            temp.push({
              name: "1",
              url: item.url,
              id: item.id,
            });
          });
          this.dialogImageUrl = val;
          this.fileList = temp;
          this.fileArr = temp;
        } else {
          this.dialogImageUrl = "";
          this.fileList = [];
        }
      },
    },
  },
  methods: {
    //限制图片格式及大小
    beforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$Message.error("上传图片只能是 png、gif、jpeg、jpg 格式!");
      } else if (!isLt2M) {
        this.$Message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //上传后获取文件流
    async httpRequest(file) {
      this.fileArr.push(file.file);
      this.$emit("upload", {
        fileArr: this.fileArr,
        type: "add",
        lableName: this.lableName,
      });
    },

    //预览
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },

    //删除
    onRemove(file, fileList) {
      let arr = [];
      fileList.forEach((item) => {
        if (item.raw) {
          arr.push(item.raw);
        } else {
          arr.push(item);
        }
      });
      this.fileArr = arr;
      this.$emit("upload", {
        fileArr: this.fileArr,
        type: "del",
        lableName: this.lableName,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.uploadimg {
  .uploadIco {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 17px !important;
  }
}
::v-deep .disabled .el-upload {
  display: none;
}
</style>
